<template>
  <div class="insert-status-wrapper">
    <vm-common-header :pageTitle="pageTitle" :goBack="goBack"></vm-common-header>
    <div class="insert-info-wrapper">
      <div class="device-info">
        <p>名称：{{deviceInfo.name}}</p>
        <p>编码：{{deviceInfo.code}}</p>
      </div>
      <div class="insert-info">
        <ul class="insert-data-list">
          <li>
            <span>{{ insertData.device_num }}</span> 接入通讯设备数
          </li>
          <li>
            <span>{{ insertData.pipe_num }}</span> 接入通道数
          </li>
          <li>
            <span>{{ insertData.point_num }}</span> 接入点位数
          </li>
        </ul>
        <ul class="btn-list">
          <li>
            <div class="btn-wrapper">
              <i></i> 接入实时数据 <span>></span>
            </div>
          </li>
          <li>
            <div class="btn-wrapper">
              <i></i> 接入历史分析 <span>></span>
            </div>
          </li>
          <li>
            <div class="btn-wrapper">
              <i></i> 工况图 <span>></span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import vmCommonHeader from "@/components/vm-common-header.vue";
export default {
  components: {
    "vm-common-header": vmCommonHeader
  },
  data() {
    return {
      pageTitle: this.$route.meta.pageTitle,
      goBack: this.$route.meta.goBack,
      deviceInfo: {
        name: "设备名称AAAAAAA",
        code: "设备编码BBBBBBB"
      },
      insertData: {
        device_num: 344,
        pipe_num: 8,
        point_num: 8
      }
    };
  }
};
</script>
<style lang="scss" scoped>
.insert-status-wrapper {
  height: 100%;
  background-color: #fff;
  padding: 0px 20px;
  text-align: left;
  overflow: hidden;
}

.insert-info-wrapper {
  border: 1px solid #d8d8d8;
  margin-top: 30px;
  text-align: left;
  .device-info {
    height: 140px;
    border-bottom: 1px solid #d8d8d8;
    padding: 0 30px;
    p {
      line-height: 70px;
      font-size: 28px;
      color: #666;
    }
  }

  .insert-info {
    padding: 30px;
    display: flex;
    .insert-data-list {
      li {
        line-height: 60px;
        margin-bottom: 30px;
        font-size: 28px;
        color: #666;
        &:last-of-type {
          margin-bottom: 0;
        }
        span {
          display: inline-block;
          width: 80px;
          height: 60px;
          border-radius: 10px;
          background-color: #eee;
          text-align: center;
          font-size: 28px;
          color: #666;
          margin-right: 10px;
        }
      }
    }

    .btn-list {
       padding-left: 60px;
      li {
        line-height: 60px;
        margin-bottom: 30px;
        font-size: 28px;
        color: #666;

        .btn-wrapper {
            padding-left: 50px;

            span {
                display: inline-block;
                line-height: 60px;
                font-size: 28px;
                font-weight: bold;
                color: #60a2f2;
            }
        }
      }
    }
  }
}
</style>
